Many of the methods included in jQuery are shortcuts for other underlying methods. For example, most of the event methods are shortcuts for calls to .bind() or .trigger(), and many AJAX methods internally call $.ajax(). These shortcuts make it convenient to use features that are otherwise complicated by many options.
The jQuery library
must maintain a delicate balance between convenience and complexity.
Each method that is added to the library can help developers to write
certain pieces of code more quickly, but also adds to the overall size
of the code base and can reduce performance. For this reason, many
shortcuts for built-in functionality are relegated to plugins, so that
we can pick and choose the ones that are useful for each project and
omit the irrelevant ones.
When we find ourselves
repeating an idiom in our code many times, it may call for the creation
of a shortcut method. For example, suppose we frequently animate items
using a combination of the built-in "slide" and "fade" techniques.
Putting these effects together means animating the height and opacity of an element simultaneously. The .animate() method makes this easy:
.animate({height: 'hide', opacity: 'hide'});
We can create a trio of shortcut methods to perform this animation when showing and hiding elements:
jQuery.fn.slideFadeOut = function() {
shortcut methods, addingelements, showingreturn this.animate({
height: 'hide',
opacity: 'hide'
});
};
jQuery.fn.slideFadeIn = function() {
return this.animate({
height: 'show',
opacity: 'show'
});
};
jQuery.fn.slideFadeToggle = function() {
return this.animate({
height: 'toggle',
opacity: 'toggle'
});
};
Now we can call .slideFadeOut() and trigger the animation whenever it is needed. Because, within a plugin method definition, this refers to the current jQuery object, the animation will be performed on all matched elements at once.
For completeness, our
new methods should support the same parameters that the built- in
shortcuts do. In particular, methods such as .fadeIn() can be customized with speeds and callback functions. Since .animate() also takes these parameters, allowing this is straightforward. We just accept the parameters and forward them on to .animate().
jQuery.fn.slideFadeOut = function(speed, callback) {
return this.animate({
height: 'hide',
opacity: 'hide'
}, speed, callback);
};
jQuery.fn.slideFadeIn = function(speed, callback) {
return this.animate({
height: 'show',
opacity: 'show'
}, speed, callback);
};
jQuery.fn.slideFadeToggle = function(speed, callback) {
return this.animate({
height: 'toggle',
opacity: 'toggle'
}, speed, callback);
};
Now, we have custom
shortcut methods that function just like their built-in counterparts.
To demonstrate this, we'll need a simple HTML page:
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.</p>
<div class="controls">
<input type="button" value="Slide and fade out"
id="out" />
<input type="button" value="Slide and fade in" id="in" />
<input type="button" value="Toggle" id="toggle" />
</div>
</body>
Our script will simply call our new methods when the buttons are clicked:
$(document).ready(function() {
$('#out').click(function() {
$('p').slideFadeOut('slow');
return false;
});
$('#in').click(function() {
$('p').slideFadeIn('slow');
return false;
});
$('#toggle').click(function() {
$('p').slideFadeToggle('slow');
return false;
});
});
And the animation occurs as expected.
